@import "./base.scss";

body {
  width: 100vw;
  min-height: 100vh;
  // overflow-x: hidden;
}

.us-box {
  width: 100vw;
  min-height: 100vh;
  background: $bg_color;
  position: relative;
  z-index: 0;

  &::after {
    z-index: -1;
    position: absolute;
    bottom: 0.87rem;
    left: 50%;
    transform: translateX(-50%);
    content: "";
    width: 19.2rem;
    height: 9.93rem;
    // opacity: 0.43;
    background: url("../image/bg/storey.png") center center no-repeat;
    background-size: 100%;
  }

  &::before {
    z-index: -1;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    // transform: translateX(-50%);
    width: 18.12rem;
    height: 2.44rem;
    content: "";
    background: url("../image/bg/gloab.png") center center no-repeat;
    background-size: 100%;
  }
}

.us-name {
  width: 100vw;
  height: 100px;
  text-align: center;
  position: relative;
  z-index: 3;

  &::after {
    position: absolute;
    width: 70vw;
    height: 2px;
    background-color: #ffffff;
    content: "";
    display: block;
    top: 95px;
    left: 50%;
    transform: translateX(-50%);
  }

  > span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;

    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #ffffff;
  }
}

.about-box {
  width: 60vw;
  height: auto;
  margin: 0.5rem auto 0 auto;

  span {
    display: block;
    line-height: 2;
    letter-spacing: 3px;
    margin: 0.2rem 0;
    font-size: 24px;
  }
}

// .us-img-box {
//   width: 15rem;

//   height: 10rem;
//   position: relative;
//   // z-index: 2;
//   margin: 0.5rem auto 0 auto;

//   padding-top: 0.4rem;

//   .us-img-left {
//     position: absolute;
//     top: 0;
//     left: 0;
//     width: 7rem;

//     // height: 70vh;
//     > img {
//       width: 7rem;
//       // height: 30vh;
//       margin-bottom: 0.3rem;
//     }
//   }

//   .us-img-right {
//     position: absolute;
//     top: 0;
//     right: 0;
//     width: 7rem;

//     // height: 70vh;
//     > img {
//       width: 7rem;
//       // height: 30vh;
//       margin-bottom: 0.3rem;
//     }
//   }
// }

#toIndex {
  position: fixed;
  top: 0.2rem;
  right: 0.2rem;
  width: 0.24rem;
  cursor: pointer;
  z-index: 10;
}

.about-us {
  width: 60vw;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  .about-left {
    .about-left-item {
      font-size: 20px;
      display: block;
      height: 0.4rem;

      span {
        display: inline-block;
        line-height: 0.4rem;
        color: #ffffff;
        &:nth-child(1) {
          width: 1rem;
        }
        &:nth-child(2) {
        }
      }
    }
  }
  .about-right {
    width: 1.8rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    // text-align: center;

    > img {
      width: 0.8rem;
    }
    > span {
      display: inline-block;
      line-height: 0.3rem;
      color: #8d8c8c;
      font-size: 0.16rem;
    }
  }
}
